import React from 'react';
import {connect} from 'dva';
import {Form, Input, Button, Radio, Checkbox, Modal, message} from 'antd';

const FormItem = Form.Item;
const RadioGroup = Radio.Group;
const CheckboxGroup = Checkbox.Group;

@connect(state => ({
    adminPowerSetting: state.adminPowerSetting,
}))
@Form.create()
export default class AdminPowerEdit extends React.Component {
    state = {
        loading: false,
        visible: false,
        data: this.props.data,
        pagination: this.props.adminPowerSetting.pagination,
        actionDescs: this.props.adminPowerSetting.actionDescs,
        actionList: [],
        checkedValues: [],
    };
    showModal = () => {
        this.setState({
            visible: true,
        });
    };

    componentWillReceiveProps() {
        const {actionDescs} = this.state;
        if (this.state.actionDescs !== undefined) {
            let arr = Object.keys(this.state.actionDescs).map(function (key) {
                return {
                    label: actionDescs[key].action_desc,
                    value: actionDescs[key].action_id,
                }
            });//转换成数组
            this.setState({
                actionList: arr,
            })
        }
    };

    handleSubmit = (e) => {
        e.preventDefault();
        const {dispatch, form} = this.props;
        form.validateFields((err, filedValue) => {
            if (err) return;
            const modalValues = {
                ...(this.state.data),
                ...filedValue,
            };
            if (!modalValues.actionList) {
                alert("您未添加权限");
                return;
            }
            this.setState({loading: true});
            dispatch({
                type: 'adminPowerSetting/updateAdminPower',
                payload: {...modalValues},
                callback: (response) => {
                    if (response.result == 0) {
                        message.success('编辑成功');
                        this.handleEditSuccess();
                        this.setState({loading: false, visible: false});
                    } else {
                        message.error('编辑失败');
                        this.setState({loading: false});
                    }
                }
            });
        });
    };

    handleEditSuccess = () => {
        const {dispatch, searchValues} = this.props;
        const {pagination} = this.state;
        const values = {
            currentPage: pagination.current,
            pageSize: pagination.pageSize,
            ...searchValues,
        };
        dispatch({
            type: 'adminPowerSetting/queryAdminPowerList',
            payload: values,
        });
    };

    handleCancel = () => {
        this.setState({
            visible: false,
        });
    };

    handleChange = (val) => {
        this.setState({
            checkedValues: val,
        });
    };

    getValues = () => {
        const {data, actionList} = this.state;
        let checkValue = [];
        if (!(data.action_list)) {
            return;
        }
        let arr = data.action_list.split(",");
        for (let i = 0; i < actionList.length; i++) {
            for (let j = 0; j < arr.length; j++) {
                if (arr[j] === actionList[i].label) {
                    checkValue.push(actionList[i].value);
                }
            }
        }
        return checkValue;
    };

    render() {
        const {visible, loading, data, actionList} = this.state;
        const {getFieldDecorator} = this.props.form;
        const formItemLayout = {
            labelCol: {
                xs: {span: 24},
                sm: {span: 7},
            },
            wrapperCol: {
                xs: {span: 24},
                sm: {span: 12},
                md: {span: 10},
            },
        };

        const submitFormLayout = {
            wrapperCol: {
                xs: {span: 24, offset: 0},
                sm: {span: 10, offset: 7},
            },
        };

        return (
            <div>
                <Button size="small" type="primary" onClick={this.showModal}>
                    编辑
                </Button>
                <Modal
                    visible={visible}
                    title="编辑管理员权限"
                    onCancel={this.handleCancel}
                    footer={null}
                >
                    <Form onSubmit={this.handleSubmit}>
                        <FormItem
                            {...formItemLayout}
                            label="管理员名"
                        >
                            {(getFieldDecorator("userName", {initialValue: data.user_name}))(<Input disabled={true}/>)}
                        </FormItem>
                        <FormItem
                            {...formItemLayout}
                            label="权限设置"
                        >
                            {(getFieldDecorator("actionList", {initialValue: this.getValues()}))(<CheckboxGroup
                                options={actionList} onChange={this.handleChange}/>)}
                        </FormItem>
                        <FormItem
                            {...formItemLayout}
                            label="管理员角色"
                        >
                            {(getFieldDecorator("roleId", {initialValue: data.role_id}))(<RadioGroup disabled>
                                <Radio value='平台管理员'>平台管理员</Radio>
                                <Radio value='供应商管理员'>供应商管理员</Radio>
                                <Radio value='运营人员'>运营人员</Radio>
                            </RadioGroup>)}
                        </FormItem>
                        <FormItem {...submitFormLayout} style={{marginTop: 32}}>
                            <Button type="primary" htmlType="submit" loading={loading}>提交</Button>
                            <Button style={{marginLeft: 8}} onClick={this.handleCancel}>取消</Button>
                        </FormItem>
                    </Form>
                </Modal>
            </div>
        );
    }
}
